.textField_container {
  position: relative;
  width: 100%;

  & .textField_label {
    color: var(--color-dark-100);
  }

  & .textField_label_disabled {
    color: var(--color-dark-300);
  }

  & .textField {
    width: 100%;
    height: 36px;
    padding: 8px 0 8px 12px;

    background-color: inherit;
    border: 1px solid var(--color-dark-300);
    border-radius: 2px;
    outline: none;

    &::placeholder {
      font-size: var(--font-size-m);
      font-weight: var(--font-weight-regular);
      color: var(--color-dark-100);
    }

    &:hover {
      background-color: var(--color-dark-300);
      border: 1px solid var(--color-dark-100);
    }

    &:disabled {
      color: var(--color-dark-300);
      background-color: inherit;
      border: 1px solid var(--color-dark-300);

      &::placeholder {
        color: var(--color-dark-300);
      }
    }

    &:active {
      border: 1px solid var(--color-light-100);

      &::placeholder {
        color: var(--color-light-100);
      }
    }

    &:focus-visible {
      color: var(--color-light-100);
      outline: 2px solid var(--color-info-700);

      ::placeholder {
        color: var(--color-light-100);
      }

      &:hover {
        background-color: inherit;
      }
    }
  }

  & .textField_error {
    border: 1px solid var(--color-danger-300);

    &::placeholder {
      color: var(--color-danger-300);
    }
  }

  & .search {
    position: relative;

    & input {
      padding-right: 10px;
      padding-left: 41px;

      &::-webkit-search-cancel-button {
        visibility: hidden;
      }
    }

    & .searchIcon {
      pointer-events: none;

      position: absolute;
      top: 8px;
      left: 12px;

      width: 20px;

      fill: var(--color-dark-100);
    }

    &:focus-within {
      & .searchIcon {
        pointer-events: visible;
        fill: var(--color-light-100);

        &:hover {
          cursor: pointer;
        }
      }
    }

    & .searchIcon_disabled {
      fill: var(--color-dark-300);
    }

    & .searchIcon_error {
      fill: var(--color-danger-500);
    }

    & .cross {
      position: absolute;
      top: 12px;
      right: 12px;

      width: 10px;

      fill: var(--color-light-100);

      &:hover {
        cursor: pointer;
      }
    }
  }

  & .password {
    position: relative;

    & .passwordEyeIcon {
      position: absolute;
      top: 6px;
      right: 12px;

      width: 20px;

      fill: var(--color-light-100);

      &:hover {
        cursor: pointer;
      }
    }

    & .passwordEyeIcon_disabled {
      fill: var(--color-dark-300);
    }
  }

  & .errorMessage {
    line-height: var(--line-height-m);
  }
}
